<template>
    <div class="login">
        <div class="login-context">
            <!--头部图片-->
            <div class="login-logo">
                <img src="../assets/little.jpg" alt="">
            </div>
            <!--form表单-->
            <el-form :model="loginForm" :rules="loginFormRul" ref="loginFormRef" label-width="100px" class="login-box">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="账号"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item class="login-btn">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { ElMessage } from 'element-plus'
export default {
    name: 'VueLogin',

    data() {
        return {
            loginForm: {
                username: "",
                password: ""
            },
            loginFormRul: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
                ]
            }
        };
    },

    mounted() {

    },

    methods: {
        login() {
            let that = this;
            this.$refs["loginFormRef"].validate((valid) => {
                if (!valid) return;

                this.$http.post('login', that.loginForm)
                    .then(function (response) {

                        console.log(response);
                        if (response.meta.status == 200) {
                            ElMessage.success({
                                message: '登录成功',
                                type: 'success'
                            }),
                            window.sessionStorage.setItem('username', response.data.admin);
                            that.$router.push("/index/userlist");
                        } else if (response.meta.status == 4000) {
                            ElMessage.success({
                                message: "账号名或密码错误",
                                type: 'error'
                            })
                            that.loginForm=""
                        }


                    })
                    .catch(function (error) {


                    })

            })


        },
        reset() {
            this.loginForm = {
                username: "",
                password: ""
            }
        }
    },
};
</script>

<style lang="css" scoped>
.login {
    height: 100%;
    background: url(../assets/bg.gif);
    background-size: cover;
}

.login-context {
    width: 450px;
    height: 300px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px -4px 4px #b27cf0;
    border-radius: 10px;
}

.login-logo {
    width: 150px;
    height: 150px;
    position: absolute;
    top: -80px;
    left: 50%;
    margin-left: -75px;
    border: 1px solid #eee;
    border-radius: 50%;
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 3px 2px #fff;
}

.login-logo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgb(238, 238, 238);
}

.login-box {
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 0 20px;
    box-sizing: border-box;
}

.login-btn {
    display: flex;
    justify-content: flex-end;
}

.el-input {
    margin-left: -30px;
}

.el-button {
    width: 100px;
}
</style>